<!--
 * @Description: 首页
 * @Author: wangfuwei
 * @Date: 2020-12-23 17:05:26
 * @LastEditors: wangfuwei
 * @LastEditTime: 2021-04-22 20:26:50
 * @FilePath: /horizon-frontend/src/views/index/index.vue
-->
<template>
  <div class="homePage" :style="{ paddingBottom: edit ? '60px' : 0 }">
    <div v-if="cloudApps.length === 0" class="noApp">
      <img class="noAppImage" :src="imageAppNone" />
      <p class="noAppInfo">{{ $t("apps.nopermission") }}</p>
    </div>
    <template v-else>
      <div>
        <!-- 首页内容 -->
        <component v-if="cardRender" :is="cardRender" :layout="layout" :edit="edit" @updateLayout="updateLayout"></component>

        <!-- 底部布局调整区域 -->
        <div class="editFooter" v-if="edit">
          <div class="default" style="width:200px">
            <span style="margin-right:10px"> {{ $t("index.set_default") }}</span>
            <a-switch size="small" />
          </div>
          <div class="add" style="width:calc(100% - 450px)">
            <div class="add_inner" @mouseover="addHover(true)" @mouseleave="addHover(false)" @click="handleAdd">
              <a-icon type="plus-circle" style="font-size: 20px;margin-right: 10px" />
              <div>{{ $t("index.add_card") }}</div>
            </div>
            <div class="add_hover" ref="addHover"></div>
          </div>
          <div style="width:250px">
            <a-button type="ghost" @click="() => cancelEdit()">{{ $t("index.cancel") }}</a-button>
            <a-button type="primary" style="margin-left: 16px" @click="save('P')">
              {{ $t("index.save") }}
            </a-button>
          </div>
        </div>

        <!-- 右侧布局调整图标 -->
        <div class="fixed-icon">
          <div @click="handleEdit" class="right-icon">
            <a-icon type="appstore" />
          </div>
          <div @click="handleSwitchScheme" class="right-icon" style="border-top: 1px solid rgb(226, 231, 239)">
            <a-icon type="swap" />
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import imageAppNone from "@/assets/images/image-app-none.png";
import { mapState } from "vuex";
import request from "@/utils/request";
import { appMixin } from "@/utils/mixin";

export default {
  name: "index",
  mixins: [appMixin],
  data() {
    return {
      imageAppNone,
      edit: false,
      cardRender: null,
      layout: [],
      showAdd: false,
      selectCard: null,
      cardList: [],
      schemeData: [], // 首页方案列表
      hasPersonalScheme: false,
    };
  },
  computed: {
    ...mapState({
      appCodes: state => state.appCodes,
      hasSystemManage: state => state.hasSystemManage,
    }),
  },
  created() {
    this.fetchSchemeData();
  },
  mounted() {
    this.getLayoutData();
    this.cardRender = require("./GridCard").default;
  },
  methods: {
    // 获取方案列表
    fetchSchemeData() {},
    /**
     * @description: 获取保存的卡片数据
     * @param {String} type 获取类型 D默认 P个性化 不传后端默认优先返回个性化
     */
    getLayoutData(type) {
      // 首页有配置项按配置项展示，没有配置项按默认显示
      const res = [
        {
          id: 81141,
          axisX: 6,
          axisY: 2,
          lenW: 3,
          topH: 1,
          userId: 73184,
          cardCode: "card1597301682000",
          axisId: "1604901972000",
          config: '{"type":"line","title":"SALESTREND","xField":"year","yField":"sales","api":"/mock/cardtest","randomNum":1601001686000}',
        },
        {
          id: 81142,
          axisX: 3,
          axisY: 2,
          lenW: 3,
          topH: 1,
          userId: 73184,
          cardCode: "card1597301740000",
          axisId: "1604650993000",
          config: '{"type":"donut","title":"SALESPERSENT","angleField":"sales","colorField":"year","api":"/mock/cardtest"}',
        },
        {
          id: 81143,
          axisX: 9,
          axisY: 2,
          lenW: 3,
          topH: 1,
          userId: 73184,
          cardCode: "card1598950748000",
          axisId: "1604650938000",
          config: '{"type":"message","title":"HELPDOCUMENT","msgTitle":"title","msgDesc":"date","msgStatus":"","msgTag":"tag","api":"/mock/cardmsg","extra":"MORE","randomNum":1604905442000,"tagColor":{"default":"#628099","colorList":[{"value":"紧急","color":"#FF5858"},{"value":"操作手册","color":"#FF7D30"}]},"statusColor":{}}',
        },
        {
          id: 81144,
          axisX: 9,
          axisY: 1,
          lenW: 3,
          topH: 1,
          userId: 73184,
          cardCode: "card1598950894000",
          axisId: "1604650926000",
          config: '{"type":"message","title":"MESSAGENOTICE","msgTitle":"title","msgDesc":"date","msgStatus":"","msgTag":"tag","api":"/mock/cardmsg","extra":"MORE","randomNum":1604905547000,"tagColor":{"default":"#628099","colorList":[{"value":"紧急","color":"#FF5858"},{"value":"操作手册","color":"#FF7D30"}]},"statusColor":{}}',
        },
        {
          id: 81145,
          axisX: 9,
          axisY: 0,
          lenW: 3,
          topH: 1,
          userId: 73184,
          cardCode: "card1598951100000",
          axisId: "1604650905000",
          config: '{"type":"message","title":"MYTODO","msgTitle":"title","msgDesc":"date","msgStatus":"status","msgTag":"","api":"/mock/cardmsg","extra":"ENTERTODOCENTER","randomNum":1599029612000,"tagColor":{},"statusColor":{"default":"#939393","colorList":[{"value":"马上到期","color":"#F7A000"},{"value":"进行中","color":"#108EE9"}]}}',
        },
        {
          id: 81146,
          axisX: 3,
          axisY: 1,
          lenW: 6,
          topH: 1,
          userId: 73184,
          cardCode: "card1598953344000",
          axisId: "1604650917000",
          config: '{"type":"news","title":"YXNEWS","newTitle":"title","newImage":"image","api":"/mock/cardnew","randomNum":1599029758000,"extra":"更多"}',
        },
        {
          id: 81147,
          axisX: 0,
          axisY: 0,
          lenW: 9,
          topH: 1,
          userId: 73184,
          cardCode: "card1599016814000",
          axisId: "1604036207000",
          config: '{"type":"custom","title":"QUICKAPPLICATION","customPath":"components/HomeCard/AppCard","randomNum":1604905366000}',
        },
        {
          id: 81148,
          axisX: 0,
          axisY: 1,
          lenW: 3,
          topH: 1,
          userId: 73184,
          cardCode: "card1597322060000",
          axisId: "1604650953000",
          config: '{"type":"number","title":"TODAYVISIT","desc":" 今日访问","api":"/mock/cardnumber","randomNum":1597322058000}',
        },
        {
          id: 81149,
          axisX: 0,
          axisY: 2,
          lenW: 3,
          topH: 1,
          userId: 73184,
          cardCode: "card1598954427000",
          axisId: "1604650961000",
          config: '{"type":"pv","title":"DAYVISITCOUNT","dayCount":"count","dayGrowth":"dayGrowth","weekGrowth":"weekGrowth","totalCount":"totalCount","api":"/mock/cardpv","randomNum":1598954420000}',
        },
      ];
      this.layout = res.map(item => {
        return {
          x: item.axisX,
          y: item.axisY,
          w: item.lenW,
          h: item.topH,
          i: item.axisId,
          config: item.config,
          cardCode: item.cardCode,
        };
      });
    },
    // 切换方案
    handleSwitchScheme() {
      this.$refs.schemeModal.show();
    },

    cancelEdit() {
      this.edit = false;
      this.getLayoutData();
    },
    // 更新layout
    updateLayout(layout) {
      this.layout = layout;
    },

    // 编辑
    handleEdit() {
      this.edit = true;
    },

    /**
     * @description: 保存布局设置
     * @param {String} type 保存类型 D默认 P个性化
     */
    save(type) {
      const _this = this;
      const values = this.layout.map(item => {
        return {
          axisX: item.x,
          axisY: item.y,
          lenW: item.w,
          topH: item.h,
          axisId: item.i,
          cardCode: item.cardCode,
        };
      });
      request(`/api/system/policyRange/savePolicy/${type}`, {
        method: "POST",
        body: values,
      }).then(() => {
        _this.fetchSchemeData();
        _this.getLayoutData();
      });
      this.edit = false;
    },
    // 新增
    handleAdd() {
      this.$refs.addCard.show();
    },
    // 保存新增
    handleAddSave(card) {
      const { layout } = this;
      // 获取最大行号
      let maxY = -1;
      layout.forEach(item => {
        if (item.y > maxY) {
          maxY = item.y;
        }
      });
      // 添加layout数据
      const obj = {
        x: 0,
        y: maxY + 1,
        w: 6,
        h: 1,
        i: `${Date.parse(new Date())}`,
        cardCode: card.cardCode,
        config: card.cardJson,
      };
      this.layout.push(obj);
    },

    addHover(hover) {
      let height = 0;
      if (hover) height = 80;
      this.$refs.addHover.style.height = `${height}px`;
    },
  },
};
</script>
<style lang="less">
@import "~ant-design-vue/lib/style/themes/default";

.homePage {
  min-height: calc(100vh - 200px);
  position: relative;
  padding: 0 50px 0 10px;
  .noApp {
    text-align: center;
    margin-top: 100px;
    .noAppImage {
      width: 380px;
      height: 260px;
    }
    .noAppInfo {
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #8c98a9;
    }
  }

  //右侧调整布局图标
  .fixed-icon {
    position: fixed;
    z-index: 999;
    right: 0;
    top: 64px;
    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
    background: #ffffff;
    color: #666;
    font-size: 20px;

    .right-icon {
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
      background: rgba(255, 255, 255, 1);

      &:hover {
        color: @primary-color;
      }
    }
  }
}
.noCard {
  min-height: calc(100vh - 140px);
  color: #aeaeae;
  font-size: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  div {
    margin-bottom: 20px;
  }
}

.updateIcon {
  width: 40px;
  height: 40px;
  text-align: center;
  padding-top: 4px;
  box-shadow: #888888 0px 0px 3px;
  background: #ffffff;
  cursor: pointer;
  position: fixed;
  right: 0px;
  top: 200px;
  z-index: 1000;
}

// 编辑底部区域
.editFooter {
  height: 58px;
  background: rgba(23, 26, 41, 0.7);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0px;
  width: 100%;
  display: flex;
  align-items: center;

  .add {
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    .add_inner {
      display: flex;
      width: 300px;
      justify-content: center;
      align-items: center;
      height: 58px;
      z-index: 1;

      &:hover {
        color: rgba(0, 0, 0, 0.75);
      }
    }

    .add_hover {
      z-index: 0;
      position: fixed;
      bottom: 0px;
      height: 0;
      width: 300px;
      background-color: rgba(255, 255, 255, 0.85);
      box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
      color: #535664;
      transition: height 0.3s;
    }
  }

  .default {
    width: 300px;
    color: #ffffff;
    font-size: 12px;
    padding-left: 40px;

    .ant-switch:not(.ant-switch-checked) {
      background-color: rgba(255, 255, 255, 0.65);
    }
  }

  .ant-btn {
    border-radius: 2px;
    font-size: 14px;
    width: 90px;
    height: 34px;
  }
}
</style>
